<template>
  <div>
    <el-card class="box-card" style="margin: 10px 0">
      <Detail />
    </el-card>
    <el-container>
      <el-main style="padding: 0 20px 0 0">
        <el-card class="box-card" style="min-height: 600px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="简介" name="1"></el-tab-pane>
            <el-tab-pane label="章节" name="2"></el-tab-pane>
            <el-tab-pane label="问答" name="3"></el-tab-pane>
            <el-tab-pane label="笔记" name="4"></el-tab-pane>
            <el-tab-pane label="评论" name="5"></el-tab-pane>
            <!-- 简介 -->
            <Introduce v-show="activeName == 1" />
            <!-- 章节 -->
            <Chapter v-show="activeName == 2" />
            <!-- 问答 -->
            <QA v-show="activeName == 3" />
            <!-- 笔记 -->
            <Note v-show="activeName == 4" />
            <!-- 评论 -->
            <Review v-show="activeName == 5" :reviewObj="reviewObj" />
          </el-tabs>
        </el-card>
      </el-main>
      <el-aside width="320px">
        <el-card class="box-card" style="margin-bottom: 10px">
          <div slot="header" class="clearfix">
            <span>授课教师</span>
          </div>
          <Teachers />
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>推荐课程</span>
          </div>
          <Recommend />
        </el-card>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
export default {
  components: {
    Detail: () => import('./Detail.vue'),
    Introduce: () => import('./Introduce.vue'),
    Chapter: () => import('./Chapter.vue'),
    QA: () => import('./QA.vue'),
    Note: () => import('../play/playContent/Note.vue'),
    // Review: () => import('@/components/review/index.vue'),
    Review: () => import('@/components/reviewNew/index.vue'),
    Teachers: () => import('./Teachers.vue'),
    Recommend: () => import('./Recommend.vue'),
  },
  data() {
    return {
      activeName: '1',
      reviewObj: {
        pid: '0', //父级节点(评价类型不传)
        resId: this.$route.query.id, //课程ID
        type: '1', //节点类型；1-评价，2-回复
        resType: '1', //资源类型；1-课程，2-知识点，3-…
      },
    }
  },
  mounted() {},
  methods: {},
}
</script>
<style scoped lang="scss">
</style>